!<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>meet说明符</title>
</head>

<body>

    <h3>高视口</h3>
    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="45" height="135" style="background:#ccc">
        <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
        <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <g id="whiskers">
            <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
            <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
        </g>
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
        <!-- ears -->
        <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
        <!-- mouth -->
        <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
        <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
        <text x="0" y="250" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMinYMin</text>
    </svg>

    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="45" height="135" style="background:#ccc">
        <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
        <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <g id="whiskers">
            <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
            <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
        </g>
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
        <!-- ears -->
        <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
        <!-- mouth -->
        <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
        <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
        <text x="0" y="150" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMidYMid</text>
    </svg>

    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="45" height="135" style="background:#ccc">
        <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
        <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <g id="whiskers">
            <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
            <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
        </g>
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
        <!-- ears -->
        <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
        <!-- mouth -->
        <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
        <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
        <text x="0" y="-150" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMaxYMax</text>
    </svg>

    <h3>宽视口</h3>
    <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" width="135" height="45" style="background:#ccc">
        <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
        <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <g id="whiskers">
            <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
            <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
        </g>
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
        <!-- ears -->
        <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
        <!-- mouth -->
        <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
        <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
        <text x="70" y="80" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMinYMin w:135 h:45</text>
    </svg>

    <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" width="135" height="45" style="background:#ccc">
        <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
        <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
        <g id="whiskers">
            <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
            <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
        </g>
        <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
        <!-- ears -->
        <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
        <!-- mouth -->
        <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
        <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
        <text x="70" y="80" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMinYMin</text>
    </svg>

    <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" width="135" height="45" style="background:#ccc">
            <circle cx="42" cy="57" r="30" stroke="black" fill="none" />
            <circle cx="33" cy="48" r="3" style="stroke:none; fill:#339933;" />
            <circle cx="51" cy="48" r="3" style="stroke:none; fill:#339933;" />
            <g id="whiskers">
                <line x1="45" y1="57" x2="81" y2="51" stroke="black" />
                <line x1="45" y1="57" x2="81" y2="62" stroke="black" />
            </g>
            <use xlink:href="#whiskers" transform="scale(-1 1) translate(-84 0)" />
            <!-- ears -->
            <polyline stroke="black" fill="none" points="64.8 37.2, 54 6, 42 27, 30 6, 19.2 37.2" />
            <!-- mouth -->
            <polyline stroke="black" fill="none" points="21 66, 27 72, 57 72, 62 66" />
            <path stroke="black" fill="#ffcccc" d="M 45 54 L 39 54 A 3 6 0  0 0 45 54" />
            <text x="-100" y="80" style="font-family: sans-serif;font-size: 14pt;stroke:none;fill: nlack;">xMaxYMax</text>
        </svg>

</body>

</html>